import './import';

import Header from "../components/Header";
import NavBar from "../components/NavBar";
import NewsList from "../components/NewsList";
import PageLoading from "../components/PageLoading";
import MoreLoading from "../components/MoreLoading";

import { NEWS_TYPE } from "../data";
import services from '../services';
import { scrollToBottom } from "../libs/utils";

;((doc) => {

    const oApp = doc.querySelector('#app');
    let oListWrapper = null;
    let t = null;
    // 页面数据配置
    const config = {
        type: "top",
        count: 10, 
        pageNum: 0,
        isLoading: false
    }
    // 存放数据
    const newsData = { }

    // 初始化
    const init = async () => {
        render();
        await setNewsList();
        // 执行完页面渲染再绑定爱你，避免报错
        bindEvent();
    }

    // 绑定触发事件
    function bindEvent () {
        // 绑定分类导航的点击时间
        NavBar.bindEvent(setType);
        // 绑定新闻点击事件
        NewsList.bindEvent(oListWrapper, setCurrentNews);
        // 监测页面滚动事件
        window.addEventListener('scroll', scrollToBottom.bind(null, getMoreList), false);
    }

    // 渲染首页布局
    function render () {
        // 头部布局
        const headerTpl = Header.tpl({
            url: '/',
            title: '新闻头条',
            showLeftIcon: false,
            showRightIcon: true
        })
        // 导航布局
        const navTpl = NavBar.tpl(NEWS_TYPE);
        // 列表布局
        const listWrapperTpl = NewsList.wrapperTpl(82);
        // 组合到页面中
        oApp.innerHTML += (headerTpl + navTpl + listWrapperTpl);
        // 把dom节点缓存下来
        oListWrapper = oApp.querySelector('.news-list');
    }

    // 渲染新闻列表
    function renderList (data) {
        // 获取页码
        const { pageNum } = config;
        // 渲染新闻列表
        const newListTpl = NewsList.tpl({
            data,
            pageNum
        })
        // 移除加载更多
        MoreLoading.remove(oListWrapper);
        // 组合到页面中
        oListWrapper.innerHTML += newListTpl;
        // 关闭加载更多的锁
        config.isLoading = false;
        // 延迟显示图片，把图片显示
        NewsList.imgShow();
    }

    // 通过分类获取新闻列表
    async function setNewsList () {
        // 获取新闻数据的分类类型，数量，页码
        const { type, count, pageNum } = config;
        // 如果数据已经缓存下来，就不发起请求
        if (newsData[type]) {
            renderList(newsData[type][pageNum]);
            return;
        }
        // 显示加载更多提示
        oListWrapper.innerHTML = PageLoading.tpl();
        // 请求数据，并缓存到newsData
        newsData[type] = await services.getNewsList(type, count);
        // 渲染列表
        setTimeout(() => {
            oListWrapper.innerHTML = '';
            renderList(newsData[type][pageNum]);
        }, 1000);
    }

    // 切换不同分类
    function setType (type) {
        // 获取从组件中传回来的分类类型
        config.type = type;
        // 切换到新分类时归零页码
        config.pageNum = 0;
        // 清空dom节点上原有的数据
        oListWrapper.innerHTML = '';
        // 获取新分类的数据列表
        setNewsList();
    }

    // 上拉更多数据，分页
    function getMoreList () {
        if (!config.isLoading) {
            // 页面触底时页码加一
            config.pageNum ++;
            // 避免重复增加定时器，先清除一次
            clearTimeout(t);
            // 获取页码和当前分类类型
            const { pageNum, type } = config;
            // 如果页码大于或者等于当前类型数据数组的长度时，则代表没有数据加载了
            if (pageNum >= newsData[type].length) {
                MoreLoading.add(oListWrapper, false);
            } else {
                // 否则就加载更多数据
                config.isLoading = true;
                // 开启加载提示
                MoreLoading.add(oListWrapper, true);
                t = setTimeout(() => {
                    setNewsList();
                }, 3000);
            }
        }
    }

    // 存储点击的新闻，进入详情页
    function setCurrentNews (options) {
        const {idx, pageNum} = options;
        console.log(newsData);
        const currentNews = newsData[config.type][pageNum][idx];
        localStorage.setItem('currentNews', JSON.stringify(currentNews));
    }

    init();
})(document)